<script setup>
// const emit = defineEmits(['getid'])
// export default {}
import { useRouter } from 'vue-router'
const router = useRouter()

defineProps({
  image: {
    type: String
  },
  name: {
    type: String
  },
  description: {
    type: String
  },
  sellerName: {
    type: String
  },
  price: {
    type: Number
  },
  categoryName: {
    type: String
  },
  id: { type: String }
})
// const sendmsg = () => {
//   emit('getid')
// }
</script>
<template>
  <div class="goods-item">
    <div class="goods-image">
      <img v-if="image" :src="image" :alt="name" />
      <img v-else src="@/assets/empty.png" alt="默认图片" />
    </div>
    <a
      :href="router.resolve({ name: 'goodsDetail', params: { id } }).href"
      target="_blank"
      rel="noopener noreferrer"
      class="goods-info"
    >
      <h3 class="goods-name">{{ name }}</h3>
      <p class="goods-description">{{ description }}</p>
      <div class="goods-meta">
        <span class="seller">商家-{{ sellerName }}</span>
        <span class="category">{{ categoryName }}</span>
      </div>
      <div class="goods-price">
        <span class="price">¥{{ price }}</span>
        <button class="view-details">查看详情</button>
      </div>
    </a>
  </div>
</template>
<style lang="scss" scoped>
.goods-item {
  width: 280px;
  margin: 16px;
  background: #ffffff;
  border-radius: 12px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
  transition:
    transform 0.2s,
    box-shadow 0.2s;
  overflow: hidden;

  &:hover {
    transform: translateY(-4px);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.12);
  }

  .goods-image {
    width: 100%;
    height: 200px;
    overflow: hidden;

    img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      transition: transform 0.3s;

      &:hover {
        transform: scale(1.05);
      }
    }
  }

  .goods-info {
    padding: 16px;
    text-decoration: none;
    color: inherit;
    display: block;

    .goods-name {
      font-size: 20px;
      font-weight: 700;
      color: #2c3e50;
      margin: 0 0 10px;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      letter-spacing: 0.5px;

      &:hover {
        color: #3498db;
      }
    }

    .goods-description {
      font-size: 14px;
      line-height: 1.6;
      color: #5d6d7e;
      margin: 0 0 12px;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
      overflow: hidden;
      height: 44px;
      font-weight: 400;
      letter-spacing: 0.3px;
    }

    .goods-meta {
      display: flex;
      justify-content: space-between;
      margin-bottom: 15px;

      .seller {
        font-size: 14px;
        color: #34495e;
        font-weight: 500;

        &:hover {
          color: #3498db;
        }
      }

      .category {
        font-size: 13px;
        color: #7f8c8d;
        background: #f7f9fa;
        padding: 3px 10px;
        border-radius: 15px;
        font-weight: 500;
        letter-spacing: 0.5px;

        &:hover {
          background: #eef2f5;
        }
      }
    }

    .goods-price {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-top: 5px;

      .price {
        font-size: 24px;
        font-weight: 700;
        color: #e74c3c;
        font-family: 'Arial', sans-serif;

        &::before {
          content: '¥';
          font-size: 16px;
          margin-right: 2px;
          font-weight: 600;
        }
      }

      .view-details {
        padding: 8px 16px;
        border: none;
        background: #3498db;
        color: white;
        border-radius: 6px;
        cursor: pointer;
        transition: all 0.3s ease;
        font-size: 14px;
        font-weight: 600;
        letter-spacing: 0.5px;
        text-transform: uppercase;

        &:hover {
          background: #2980b9;
          transform: translateY(-1px);
        }
      }
    }
  }
}
</style>
